<template>
	<div class="height-screen">
		<div class="con-header ">
		<el-button type="primary" @click="submitForm">FBA发货</el-button>
	<!-- 	<el-button @click="marketSplit" v-if="summary.marketplaceid=='EU'">分配站点</el-button> -->
		</div>
		<el-row :gutter="16" class="m-t-16">
			<el-col :span="16">
				<el-card shadow="never">
					<el-space >
						<data-sheet class="ic-cen" theme="filled" size="20" fill="#FF6700"/>
						 <h5> 发货合计
						 <span v-if="summary.transtype">-{{summary.transtype}}</span>
						 <span v-if="summary.oversea">-{{summary.oversea}}</span>
						 </h5>
					</el-space>
				<div class="con-body">
					<el-row >
						<el-col :span="8">
							<div class="flex-v-bet">
								<span class="title">SKU数量</span>
								<span class="data">{{summary.sumNum}}</span>
							</div>
						</el-col>	
						<el-col :span="8">
							<div class="flex-v-bet">
								<span class="title">发货数量</span>
								<span class="data">{{summary.sumAmount}}</span>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="flex-v-bet">
								<span class="title">货值</span>
								<span class="data" v-if="summary.sumPrice">￥{{formatFloat(summary.sumPrice)}}</span>
								<span class="data" v-else>￥0</span>
							</div>
						</el-col>
					</el-row>
					<el-row class="m-t-16">
						<el-col :span="8">
							<div class="flex-v-bet">
								<span class="title">预估箱子体积</span>
								<span class="data" v-if="summary.sumBoxcm3">{{formatFloat(summary.sumBoxcm3/1000000)}} m³</span>
								<span class="data" v-else>0 m³</span>
							</div>
						</el-col>	
						<el-col :span="8">
							<div class="flex-v-bet">
								<span class="title">预估发货重量</span>
								<span class="data" v-if="summary.sumWeight">{{formatFloat(summary.sumWeight)}} kg</span>
								<span class="data" v-else>0 kg</span>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="flex-v-bet">
								<span class="title">预估材积重量</span>
								<span class="data" v-if="summary.sumVolume">{{formatFloat(summary.sumVolume)}} kg</span>
								<span class="data" v-else>0 kg</span>
							</div>
						</el-col>
					</el-row>
				</div>
				</el-card>
			</el-col>
		<el-col :span="8">
				<el-card shadow="never">
					<el-space >
					<bookmark-one class="ic-cen"  theme="filled" size="18" fill="#e6a23c"/>
				 <h5>历史发货</h5>
				 </el-space>
				 <div class="">
				 	<ul class="font-small ul-list">
				 		<li v-for="shipment in shiplist"><span>{{shipment.createdate}} </span><span>  
						 <span style="margin-left:10px;"  class="font-extraSmall"> 发货数量：</span>
						 {{shipment.Quantity}} </span>
						   <el-tag  style="margin-left:10px;" :type="tranStatusType(shipment)" v-if="shipment.status"> {{tranStatus(shipment)}}</el-tag>
						 </li>
			 
				 	</ul>
				 </div>
				</el-card>
			</el-col>
		</el-row>
		<p class="font-extraSmall m-t-16 m-b-8">去掉勾选的产品，可分批次或部分发货</p>
		<el-table :data="planData.list" @selection-change="handleSummary"  border ref="tableRef">
			<el-table-column type="selection"></el-table-column>
			<el-table-column label="图片"  width="65">
				<template #default="scope">
					<el-image :src="scope.row.image"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="名称/msku" show-overflow-tooltip>
				<template #default="scope">
					<div class="name">{{scope.row.name}}</div>
					<div class="sku">{{scope.row.msku}}</div>
				</template>
			</el-table-column>
			<el-table-column label="平台sku" prop="sku">
				<template #default="scope">
					<div class="sku">{{scope.row.sku}}</div>
					<div ><span class="font-extraSmall">采购成本：</span>
					<span class="text-orange">￥</span>{{scope.row.price}}</div>
				</template>
			</el-table-column>
			<el-table-column label="库存" prop="quantity" width="80"></el-table-column>
			<el-table-column label="产品附加费" prop="addfee" width="100">-</el-table-column>
			<el-table-column label="产品材质" prop="material"></el-table-column>
			<el-table-column label="实际发货总量"  prop="amount" width="100"></el-table-column>
		</el-table>
	</div>
</template>

<script setup>
import { ref ,nextTick ,reactive,onMounted,toRefs,watch} from 'vue'
import {tranStatus,tranStatusType} from "@/hooks/erp/shipment/shipment_status.js"
import shipmentApi from "@/api/amazon/inbound/shipmentApi.js";
import { useRouter } from 'vue-router'
import {formatFloat} from '@/utils/index';
import planApi from '@/api/erp/ship/planApi.js';
import warehouseApi from '@/api/erp/warehouse/warehouseApi';
let tableRef = ref()
let props = defineProps({
  	 	                       planData:{list:[]},
		                       groupid:"",
							   transtypeOptions:[],
							   warehouseid:"",
  	                       });
	const { planData,groupid,warehouseid} = toRefs(props);
	let state = reactive({     transtype:"",
		                       summary:{sumNum:0,sumAmount:0,sumPrice:0,
							            sumBoxcm3:0,sumWeight:0,sumVolume:0},
	 	                       shiplist:[]
	                       });
						    
						 
	const { shiplist,summary} = toRefs(state);
let router = useRouter() ;
function marketSplit(){
		router.push({
			path:"/e/s/p/e",
			query:{
				title:'站点分配 ',
				path:"/e/s/p/e",
			}
		})
	}
	watch(props.planData,()=>{
		handleSummary(props.planData.list);
	})
	async function handleSummary(rows){
		state.summary.sumNum=0;
		state.summary.sumAmount=0;
		state.summary.sumPrice=0;
		state.summary.sumBoxcm3=0;
		state.summary.sumWeight=0;
		state.summary.sumVolume=0;
		props.transtypeOptions.forEach(row=>{
			if(props.planData.transtype==row.id){
				state.summary.transtype=row.name;
			}
		});
		rows.forEach(row=>{
			state.summary.sumNum+=1 ;
			var amount=parseInt(row.amount);
			state.summary.sumAmount+=amount;
			if(row.price){
				state.summary.sumPrice+=parseFloat(row.price)*amount;
			}
			if(row.boxcm3){
			  state.summary.sumBoxcm3+=parseFloat(row.boxcm3)*(amount/parseInt(row.boxnum));
			}
			if(row.pkgweight){
				 state.summary.sumWeight+=parseFloat(row.pkgweight)*amount;
			}
			if(row.pkgvolume){
				 state.summary.sumVolume+=parseFloat(row.pkgvolume)*amount;
			}
		});
		if(props.planData.overseaid){
			await warehouseApi.detail({id:props.planData.overseaid}).then(res=>{
				state.summary.oversea=res.data.name;
			});
		}
	}
	function submitForm(){
		var param={};
	    var rows=tableRef.value.getSelectionRows();
		planApi.batch(rows).then(res=>{
			router.push({
				path:'/invoice/addshipment',
				query:{
					batchnumber:res.data,
					warehouse:props.warehouseid,
					group:props.groupid,
					marketplaceid:props.planData.marketplaceid,
					title:'添加货件',
					path:'/invoice/addshipment',
				}
			}) 
		})
	}
	onMounted(async()=>{
		await shipmentApi.getShipRecordByMarket({groupid:props.groupid,
		 marketplaceid:props.planData.marketplaceid}).then(res=>{
			state.shiplist=res.data;
		});
		setTimeout(function(){
		         tableRef.value.toggleAllSelection();
		},500);
	})
  
</script>

<style scoped="scoped">
	.text-gray{
		color:var(--el-text-color-secondary)
	}
	.height-screen{
		height: calc(100vh - 100px);
		width: 100%;
		padding:16px ;
	}
	.flex-warp{
		display: flex;
	}
	.m-t-16{
		margin-top:16px;
	}
	.border-left{
		border-left: 1px solid var(--el-border-color-base);
	}
	.el-menu{border-right: 0;}
	.flex-v-bet{
		display: flex;
		flex-direction: column;
	}
	.flex-v-bet .title{
		font-size:12px;
		color: var(--el-text-color-secondary);
	}
	.flex-v-bet .data{
		font-size:16px;
		font-weight: 600;
	}
	.con-body{
		margin-top:16px;
		margin-bottom: 16px;
	}
	.ul-list{
		margin-left: 16px;
		margin-top:10px;
	}
	.ul-list li::marker {
	    color: #FF6700;
	    line-height: 32px;
	}
	.m-b-8{
		margin-bottom:8px;
	}
</style>